<template>
  <div class="list" ref="listWrapper">
    <div>
      <div class="hot-cities">
        <div class="hot-cities-title">热门城市</div>
        <ul class="clearfix">
          <li
            v-for="item in computedHotCities"
            :key="item.id"
            :class="item.borderType"
            @click="handleCityClick(item.name)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="alphabet-menu">
        <div class="alphabet-menu-title">字母排序</div>
        <ul class="clearfix">
          <li
            v-for="(item, index) in letters"
            :key="index"
            @click="handleLetterClick"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <div
        class="alphabet-list"
        v-for="(item, key) in cities"
        :key="key"
        :ref="key"
      >
        <div class="alphabet-list-title">{{ key }}</div>
        <ul class="clearfix">
          <li
            v-for="innerItem in item"
            :key="innerItem.id"
            @click="handleCityClick(innerItem.name)"
          >
            {{ innerItem.name }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import { mapMutations } from "vuex";
export default {
  name: "CityList",
  props: {
    hotCities: Array,
    cities: Object
  },
  data() {
    return {
      letter: ""
    };
  },
  computed: {
    letters() {
      let letters = [];
      for (let i in this.cities) {
        letters.push(i);
      }
      return letters;
    },
    computedHotCities() {
      let result = [],
        length = this.hotCities.length;
      for (let i = 0; i < length; i++) {
        var resObj = {};
        const item = this.hotCities[i];
        resObj.id = item.id;
        resObj.name = item.name;
        if (item.order === 1) {
          resObj.borderType = "";
        } else if (item.order === 2 || item.order === 3) {
          resObj.borderType = "border-left";
        } else if (item.order % 3 === 1) {
          resObj.borderType = "border-top";
        } else {
          resObj.borderType = "border-topleft";
        }
        result.push(resObj);
      }
      return result;
    }
  },
  watch: {
    letter() {
      if (this.letter) {
        // this.$refs[this.letter]是个数组，后面需要带上索引
        const element = this.$refs[this.letter][0];
        this.scroll.scrollToElement(element);
      }
    }
  },
  mounted() {
    this.scroll = new BScroll(this.$refs.listWrapper);
  },
  methods: {
    handleLetterClick(e) {
      this.letter = e.target.innerText;
    },
    ...mapMutations(["changeCityName"]),
    handleCityClick(city) {
      this.changeCityName(city);
      this.$router.push({ name: "Home" });
    }
  }
};
</script>

<style lang="stylus" scoped>
div {
  box-sizing: border-box;
}

.clearfix::after {
  display: block;
  content: '';
  clear: both;
}
.list {
  width: 100%;
  position: absolute;
  left: 0;
  top: .88rem;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.hot-cities {
  width: 100%;
  height: 4.32rem;
}

.hot-cities .hot-cities-title,
.alphabet-menu .alphabet-menu-title,
.alphabet-list .alphabet-list-title {
  width: 100%;
  height: .72rem;
  line-height: .72rem;
  padding: 0 .2rem;
  background-color: #f5f5f5;
}

.hot-cities ul li {
  float: left;
  width: 33.33%;
  height: .9rem;
  line-height: .9rem;
  text-align: center;
}

.alphabet-menu ul li {
  float: left;
  width: 16.66%;
  height: .9rem;
  line-height: .9rem;
  text-align: center;
}

.alphabet-list ul li {
  float: left;
  width: 25%;
  height: .9rem;
  line-height: .9rem;
  text-align: center;
}
</style>
